<template>
  <div>
      <button @click="handleClick">修改状态数据1</button>
      <button @click="handleClickPatch">修改状态数据2</button>
        <button @click="handleClickMethod">修改状态数据3</button>

        <button @click="handleClickActions">修改状态数据4</button>
        <button @click="handleClickChangePhone">修改电话</button>
        <button @click="getList">获得数组</button>
  </div>
</template>

<script lang="ts" setup>
import {mainstore} from '../store/index'
const store = mainstore()

// 第一种方法
const handleClick = () => {
    store.count++
}

// 第二种方式 $patch
const handleClickPatch = () => {
    store.$patch({
       count:store.count + 2,
       helloWorld: store.helloWorld === 'cheng' ? "helloWorld" : "cheng"  
    })
}

// 第三种方式 $patch 传递函数
const handleClickMethod = () => {
    store.$patch((state) => {

        state.count++
        state.helloWorld = store.helloWorld === 'cheng' ? "helloWorld" : "cheng" 
    })
}

// 第四种方式 actions
const handleClickActions = () => {
    store.changeState()
}


const handleClickChangePhone = () => {
    store.phone = 15170156416
}

const getList = () => {
    store.getList()
}
</script>

<style>

</style>